/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/

var app = new Vue({
  el: "#player",
  data: {
    //输入框查询的字符串  需v-model双向绑定
    query: "",  
    //歌曲列表数据
    musicList: [],    
    //歌曲地址
    musicUrl: "",
    //歌曲封面图片地址
    musicPic: "",
    //热门评论数据
    hotComments: [], 
    //歌曲是否播放中
    isPlaying: false,
    //mv地址
    mvUrl: "",
    //显示MV遮罩层
    showMV: false
  },
  methods: {
    //查询音乐列表
    searchMusic: function () {
      var that = this; //解决this对象改变的问题

      axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
        function (response) {
          console.info("查询歌曲")
          console.info(response);
          that.musicList = response.data.result.songs;
        }, function (err) {
          console.info(err);
        }
      )
    },
    //选择音乐并播放
    playMusic: function (musicId) {
      var that = this; //解决this对象改变的问题
      console.info("musicId" + musicId);
      axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
        function (response) {
          console.info("查询歌曲地址")
          //console.info(response);
          that.musicUrl = response.data.data[0].url;
        },
        function (err) {
          console.info(err);
        }
      )
      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(function (response) {
        console.info("查询歌曲封面")
        console.info(response);
        that.musicPic = response.data.songs[0].al.picUrl;
      }, function (err) {
        console.info(err);
      })

      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function (response) {
        console.info("查询热门评论")
        console.info(response);
        that.hotComments = response.data.hotComments;
      }, function (err) {
        console.info(err);
      })
    },
    //监听播放
    play: function () {
      console.info("播放");
      this.isPlaying = true;
    },
    //监听暂停
    pause: function () {
      console.info("暂停");
      this.isPlaying = false;
    },
    //播放MV
    playMV: function (mvid) {
      var that = this;
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
        .then(function (response) {
          console.info("获取mv地址");
          console.info(response);
          that.mvUrl = response.data.data.url;
          that.showMV = true;
          //暂停播放中的音乐
          //语法 vue实例挂载的dom下的子组件中，ref="audio"的dom，调用其暂停pause()方法。
          that.$refs.audio.pause()
        }, function (err) {
          console.info(err);
        })
    },
    closeVideo: function () {
      this.showMV = false;
      //暂停video  
      //语法 vue实例挂载的dom下的子组件中，ref="video"的dom，调用其暂停pause()方法。
      this.$refs.video.pause()
    }
  }
})